{extend name="./base" /}

{block name="css"}{/css}

{block name="body"}
<div class="layui-fluid">
	<div class="layui-card">
		<!-- TABLE正文 -->
		<div class="layui-card-body">
			<table id="tableList" lay-filter="tableList" class="layui-table"></table>
		</div>

		<!-- 表头操作 -->
		<script type="text/html" id="toolBar">
			<a class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</a>
		</script>

		<!-- 表格列操作 -->
		<script type="text/html" id="actBar">
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="rule">分配权限</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>
	</div>
</div>

{/block}

{block name="script"}
<script>
	layui.use(['layer', 'form', 'table'], function () {
		var table = layui.table, form = layui.form, $ = layui.$;
		table.render({
			elem: '#tableList'
			,url:'/admin/rbac/role/'
			,id: 'thisTable'
			,cols: [[
				{field:'id', title: 'ID', width: 50},
				{field:'title', title: '分组名称'},
				{title: '操作', toolbar: '#actBar', align: 'center', minWidth: 130}
			]]
			,defaultToolbar: ['filter']
			,toolbar: '#toolBar'
			,page: true
		});

		// 监听操作按钮
		table.on('tool(tableList)', function(obj){
			let data = obj.data, event = obj.event;
			switch (event){
				case 'edit':
					window.location.href = '/admin/rbac/editrole?id=' + data.id
					break;
				case 'del':
					let ids = [];
					ids.push(data.id);
					comDel(ids, '/admin/rbac/delrole')
					break;
				case 'rule':
					window.location.href = '/admin/rbac/grouprules?gid=' + data.id
					break;
				default:
					return false;
			}
		})

		// 监听表头操作按钮
		table.on('toolbar(tableList)', function(obj){
			let event = obj.event;
			switch (event){
				case 'add':
					window.location.href = '/admin/rbac/editrole'
					break;
				default:
					return false;
			}
		})
	});
</script>
{/block}